<template>
	<view class="register-container">
		<!-- 顶部导航 -->
		<u-navbar 
			title="用户注册" 
			:border-bottom="false"
			:background="{ background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' }"
			:title-style="{ color: 'white' }"
		></u-navbar>

		<!-- 注册表单 -->
		<view class="form-section">
			<view class="form-title">
				<text class="title">欢迎注册</text>
				<text class="subtitle">请填写以下信息完成注册</text>
			</view>

			<view class="form-item">
				<u-input 
					v-model="registerForm.userName" 
					placeholder="请输入用户昵称"
					prefix-icon="account"
					:border="true"
					maxlength="20"
				></u-input>
			</view>
			
			<view class="form-item">
				<u-input 
					v-model="registerForm.userTel" 
					type="number" 
					placeholder="请输入手机号"
					prefix-icon="phone"
					:border="true"
					maxlength="11"
					@blur="checkPhone"
				></u-input>
			</view>
			
			<view class="form-item">
				<u-input 
					v-model="registerForm.userPassword" 
					type="password" 
					placeholder="请输入密码(6-20位，包含字母和数字)"
					prefix-icon="lock"
					:border="true"
					:password-icon="true"
				></u-input>
			</view>

			<view class="form-item">
				<u-input 
					v-model="registerForm.confirmPassword" 
					type="password" 
					placeholder="请再次输入密码"
					prefix-icon="lock"
					:border="true"
					:password-icon="true"
				></u-input>
			</view>

			<view class="agreement-section">
				<u-checkbox 
					v-model="agreed"
					active-color="#007AFF"
					size="16"
				></u-checkbox>
				<text class="agreement-text">我已阅读并同意</text>
				<text class="agreement-link" @click="showAgreement">《用户协议》</text>
			</view>

			<view class="button-section">
				<u-button 
					type="primary" 
					:loading="loading"
					@click="handleRegister"
					:disabled="!canRegister"
					size="large"
				>
					{{ loading ? '注册中...' : '立即注册' }}
				</u-button>
			</view>

			<view class="login-section">
				<text class="login-text">已有账号？</text>
				<text class="login-link" @click="goToLogin">立即登录</text>
			</view>
		</view>
	</view>
</template>

<script>
import { register, checkPhoneExists } from '@/utils/auth.js'

export default {
	data() {
		return {
			registerForm: {
				userName: '',
				userTel: '',
				userPassword: '',
				confirmPassword: ''
			},
			loading: false,
			agreed: false
		}
	},
	computed: {
		canRegister() {
			return this.registerForm.userName && 
				   this.registerForm.userTel.length === 11 && 
				   this.registerForm.userPassword.length >= 6 && 
				   this.registerForm.confirmPassword && 
				   this.agreed
		}
	},
	methods: {
		// 处理注册
		async handleRegister() {
			if (!this.validateForm()) {
				return
			}

			this.loading = true
			try {
				const result = await register(this.registerForm)
				if (result.code === 200) {
					uni.showModal({
						title: '注册成功',
						content: '注册成功，请登录',
						showCancel: false,
						success: () => {
							this.goToLogin()
						}
					})
				} else {
					uni.showToast({
						title: result.msg || '注册失败',
						icon: 'none'
					})
				}
			} catch (error) {
				console.error('注册失败:', error)
				uni.showToast({
					title: '注册失败，请重试',
					icon: 'none'
				})
			} finally {
				this.loading = false
			}
		},

		// 表单验证
		validateForm() {
			if (!this.registerForm.userName.trim()) {
				uni.showToast({
					title: '请输入用户昵称',
					icon: 'none'
				})
				return false
			}

			if (!this.registerForm.userTel) {
				uni.showToast({
					title: '请输入手机号',
					icon: 'none'
				})
				return false
			}

			if (!/^1[3-9]\d{9}$/.test(this.registerForm.userTel)) {
				uni.showToast({
					title: '手机号格式不正确',
					icon: 'none'
				})
				return false
			}

			if (!this.registerForm.userPassword) {
				uni.showToast({
					title: '请输入密码',
					icon: 'none'
				})
				return false
			}

			if (!/^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{6,20}$/.test(this.registerForm.userPassword)) {
				uni.showToast({
					title: '密码必须包含字母和数字，长度6-20位',
					icon: 'none'
				})
				return false
			}

			if (this.registerForm.userPassword !== this.registerForm.confirmPassword) {
				uni.showToast({
					title: '两次密码不一致',
					icon: 'none'
				})
				return false
			}

			if (!this.agreed) {
				uni.showToast({
					title: '请阅读并同意用户协议',
					icon: 'none'
				})
				return false
			}

			return true
		},

		// 检查手机号是否已注册
		async checkPhone() {
			if (this.registerForm.userTel.length === 11) {
				try {
					const result = await checkPhoneExists(this.registerForm.userTel)
					if (result.code !== 200) {
						uni.showToast({
							title: result.msg || '该手机号已注册',
							icon: 'none'
						})
					}
				} catch (error) {
					console.error('检查手机号失败:', error)
				}
			}
		},

		// 显示用户协议
		showAgreement() {
			uni.showModal({
				title: '用户协议',
				content: '这里是用户协议内容...',
				showCancel: false
			})
		},

		// 跳转登录页面
		goToLogin() {
			uni.navigateBack()
		}
	}
}
</script>

<style lang="scss" scoped>
.register-container {
	min-height: 100vh;
	background: #f5f5f5;
}

.form-section {
	background: white;
	margin: 20rpx;
	border-radius: 20rpx;
	padding: 60rpx 40rpx;
	box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.1);
}

.form-title {
	text-align: center;
	margin-bottom: 60rpx;
	
	.title {
		display: block;
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;
	}
	
	.subtitle {
		display: block;
		font-size: 28rpx;
		color: #666;
	}
}

.form-item {
	margin-bottom: 40rpx;
}

.agreement-section {
	display: flex;
	align-items: center;
	margin-bottom: 60rpx;
	
	.agreement-text {
		color: #666;
		font-size: 28rpx;
		margin-left: 20rpx;
		margin-right: 10rpx;
	}
	
	.agreement-link {
		color: #007AFF;
		font-size: 28rpx;
	}
}

.button-section {
	margin-bottom: 40rpx;
}

.login-section {
	text-align: center;
	
	.login-text {
		color: #666;
		font-size: 28rpx;
		margin-right: 10rpx;
	}
	
	.login-link {
		color: #007AFF;
		font-size: 28rpx;
		font-weight: bold;
	}
}
</style>
